<template>
  <view class="container">
    <view class="content">
      <ve-form ref="veFormRef" :model="form" :rules="rules">
        <ve-card title="信息填写" type="none">
          <ve-form-item label="收支方式" prop="inExpWay" required>
            <ve-picker-inline
              v-model="form.inExpWay"
              placeholder="请选择"
              :range="dict.inExpWayList"
              unit="arrowRight"
              @change="onChange"
            />
          </ve-form-item>
          <ve-form-item v-if="form.inExpWay" label="账号" prop="bankCardNumber" required>
            <ve-input v-model="form.bankCardNumber" placeholder="请输入" :maxlength="50" />
          </ve-form-item>
          <ve-form-item v-if="form.inExpWay && form.inExpWay === 1" label="开户行" prop="bank" required>
            <ve-input v-model="form.bank" placeholder="请输入" :maxlength="50" />
          </ve-form-item>
          <!-- <ve-form-item label="开户地省" prop="provinceCode" required :borderBottom="form.provinceCode ? true : false">
            <ve-picker-inline
              v-model="form.provinceCode"
              placeholder="请选择"
              :range="provinceList"
              unit="arrowRight"
              @change="changeProvince"
            >
            </ve-picker-inline>
          </ve-form-item>
          <ve-form-item v-if="form.provinceCode" label="开户地市" prop="cityCode" required :borderBottom="false">
            <ve-picker-inline v-model="form.cityCode" placeholder="请选择" :range="cityList" unit="arrowRight" @change="changeCity">
            </ve-picker-inline>
          </ve-form-item> -->
        </ve-card>
      </ve-form>

      <ve-bottom-box size="mini">
        <ve-button type="primary" size="long" @click="handleSave">确认</ve-button>
      </ve-bottom-box>
    </view>
  </view>
</template>
<script setup>
  import { ref, provide, computed, nextTick, watch, onMounted } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import { findAreaSelect, addStaffBankInfo, addPeerBankInfo, addSupplierBankInfo } from '@/api/cost/index'
  import { usePageDict } from '@/hooks/useDict'

  const dict = usePageDict('costToListDict')

  const form = ref({})
  const reg = /^[1-9][0-9]*$/
  const rules = computed(() => {
    const _rules = {
      inExpWay: {
        required: true,
        message: '请选择收款账号',
      },
      bankCardNumber: {
        required: true,
        message: '请输入账号',
        // validator: (rule, value, callback) => {
        //   console.log(rule, value, callback, 'validator')
        //   if (reg.test(value)) {
        //     callback()
        //   } else {
        //     callback('请输入正确的账号')
        //   }
        // },
      },
      // provinceCode: {
      //   required: true,
      //   message: '请选择开户地省',
      // },
      // cityCode: {
      //   required: true,
      //   message: '请选择开户地市',
      // },
    }
    if (form.value.inExpWay === 1) {
      _rules.bank = {
        required: true,
        message: '请输入开户行',
      }
    }

    return _rules
  })
  const orderType = ref()
  // 省市级联菜单
  const provinceAndCityList = ref([])
  // 省份操作
  const provinceList = ref([])
  const getProList = () => {
    findAreaSelect().then((res) => {
      console.log(res)
      provinceAndCityList.value = res.result
      provinceList.value = res.result.map((i) => {
        return {
          value: i.code,
          label: i.name,
        }
      })
    })
  }
  const changeProvince = (val, option) => {
    form.value.provinceCode = val
    form.value.provinceName = option.label
    getCityList(val)
  }
  // 市操作
  const cityList = ref([])
  const getCityList = (val) => {
    cityList.value = provinceAndCityList.value
      ?.find((i) => i.code == val)
      .list.map((i) => {
        return {
          value: i.code,
          label: i.name,
        }
      })
  }
  const changeCity = (val, option) => {
    form.value.cityCode = val
    form.value.cityName = option.label
  }

  const onChange = () => {
    veFormRef.value.clearValidate()
    form.value.bankCardNumber = ''
    form.value.bank = ''
  }

  const veFormRef = ref(null)
  const handleSave = () => {
    veFormRef.value.validate((valid, errors) => {
      if (valid) {
        let params = {
          id: form.value.id,
          backInfoList: [
            {
              inExpWay: form.value.inExpWay,
              bankCardNumber: form.value.bankCardNumber,
              bank: form.value.bank,
              // provinceCode: form.value.provinceCode,
              // cityCode: form.value.cityCode,
              // provinceName: form.value.provinceName,
              // cityName: form.value.cityName,
            },
          ],
        }
        let handleWay =
          orderType.value == 'staffOrder' ? addStaffBankInfo : orderType.value == 'peerOrder' ? addPeerBankInfo : addSupplierBankInfo
        handleWay(params).then((res) => {
          uni.showToast({
            title: '添加成功',
          })
          uni.$emit('refreshBankData')
          uni.navigateBack()
        })
      }
    })
  }
  onLoad((option) => {
    form.value.id = option.id
    orderType.value = option.orderType
    getProList()
  })
</script>
<style lang="scss" scoped>
  .container {
    padding: 24rpx;
  }
</style>
